<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二：新闻潮流排行榜</title>
</head>
<style type="text/css">
    *{margin: 0px;padding: 0px;}
    body{font: 14px/1.5 "Microsoft YaHei"}
    .news{width: 270px;padding: 15px;margin: 50px auto;border: 1px solid #ccc}
    .news h3{height: 35px; border-bottom: 1px solid #ccc;font-size: 18px}
    .news h3 span{font-size: 16px;color:#ddd;}
    .news .list{list-style: none;}
    .news .list li{margin: 14px 0 0 10px;padding-left: 25px;background: url("images/4-2.png") no-repeat -9px 2px;}
    .news .list li a{color: #000;text-decoration: none}
    /*scss*/
    .news .list li.item2{background-position: -9px -28px;}
    .news .list li.item3{background-position: -9px -60px;}
    .news .list li.item4{background-position: -9px -90px;}
    .news .list li.item5{background-position: -9px -120px;}
    .news .list li.item6{background-position: -9px -150px;}
    .news .list li.item7{background-position: -9px -180px;}
</style>
<body>
<div class="news">
    <h3>潮流排行 <span>Most Read</span></h3>
    <ul class="list">
        <li class="item1"><a href="#" target="_blank">秋冬拗造型 你也需要一款时髦...</a></li>
        <li class="item2"><a href="#" target="_blank">屡登女富豪榜首 川普女儿能挣...</a></li>
        <li class="item3"><a href="#" target="_blank">英王室175年传家宝 男女出生必...</a></li>
        <li class="item4"><a href="#" target="_blank">k帅穿裙装变美 天使AA换裤装男...</a></li>
        <li class="item5"><a href="#" target="_blank">夏琳王妃美过10年前？穿Dior高...</a></li>
        <li class="item6"><a href="#" target="_blank">东京红毯吹出强劲中国风 吴亦凡...</a></li>
        <li class="item7"><a href="#" target="_blank">一场“最诗艺”的时尚秀</a></li>
    </ul>

</div>


</body>
</html>